<template>
    <view class="pageContainer">
        <view class="headerContainer">
            <!--           <view class="title">
               {{detailObj.name}}
           </view> -->
            <view class="video" v-if="detailObj.videoItems&&detailObj.videoItems.length>0">
                <video id="courseVideo" :src="detailObj.videoItems[currentIndex]" @error="videoErrorCallback"
                    enable-play-gesture enable-progress-gesture show-mute-btn controls :object-fit="'contain'"
                    picture-in-picture-mode="['push', 'pop']" :poster="detailObj.cover">
                </video>
            </view>
        </view>
        <view class="sessionContainer" v-for="(item,index) in detailObj.videoItems" :key="index"
            @click="onSelectSession(index)">
            <view class="left">
                <image class="img" v-if="currentIndex==index" src="/pages/shop/static/image/icon_player_sel.png"
                    mode="">
                </image>
                <image class="img" v-else src="/pages/shop/static/image/icon_player.png" mode=""></image>

                <view class="text">
                    <!-- 第{{index+1}}段: -->
                    <view class="title">
                        {{detailObj.name}}--{{index+1}}
                    </view>
                </view>
            </view>

            <view class="right">
                <!-- {{item.progress}}% -->
            </view>
        </view>
        <view class="" style="height: 200rpx;">

        </view>
        <share-button :backgroundBtn="'#5E9FFD'"
			@onShare="onShare"
		></share-button>
    </view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")

    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null


    export default {
        data() {
            return {
                detailId: '',
                detailObj: {
                    poster: '',
                },
                currentIndex: 0,
            };
        },

        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        components: {

        },
        onLoad(options) {
            that = this;
            if (options.id) {
                that.detailId = options.id;
                that.getProjectVideoDetail();
            }
        },
        onShow() {

        },
        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),

            getProjectVideoDetail() {
                let that = this
                api.getProjectVideoDetail({
                    param: {
                        id: that.detailId,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.detailObj = res.data
                        if (res.data.name && res.data.name.length > 0) {
                            uni.setNavigationBarTitle({
                                title: res.data.name
                            })

                            that.shareTitleMixins = that.detailObj.name + '视频';
                            that.shareImageMixins = that.detailObj.cover;
                        }

                    }
                })
            },
            videoErrorCallback() {

            },
            onSelectSession(id) {
                this.currentIndex = id;

                var videoContextPrev = wx.createVideoContext('courseVideo')

                videoContextPrev.stop();

                setTimeout(function() {
                    videoContextPrev.play();
                }, 500)
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
    }

    .pageContainer {
        display: flex;
        flex-direction: column;
    }

    .imageContainer {
        width: 240rpx;
        height: 240rpx;
        background-color: #F3F3F3;
        margin-left: 5rpx;
        margin-right: 5rpx;
        margin-bottom: 10rpx;
    }

    .headerContainer {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: #FFFFFF;

        .title {
            width: 100%;
            padding-left: 24rpx;
            font-size: 32rpx;
            color: #1F1F1F;
            line-height: 45rpx;
            margin-top: 24rpx;
            margin-bottom: 24rpx;
            display: flex;
        }

        .video {

            background-color: FFFFFF;
            width: 750rpx;
            text-align: center;

            video {
                width: 100%;
            }
        }
    }

    .sessionContainer {
        width: 714rpx;
        margin-left: 18rpx;
        min-height: 104rpx;
        padding: 20rpx 20rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        margin-top: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;

            .img {
                width: 64rpx;
                height: 64rpx;
            }

            .text {
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                margin-left: 20rpx;
                display: flex;

                .title {
                    margin-left: 10rpx;
                    width: 260rpx;
                }

            }
        }

        .right {
            color: #333333;
            line-height: 33rpx;
            font-size: 24rpx;
        }
    }
</style>
